<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">添加揩车记录</view>
		</cu-custom>
		<view :class="['margin-xs radius shadow shadow-lg bg-white' ,BackGroundBox]" v-if="isShow">
			<view style="margin-left: 32rpx;font-size: 36rpx;color: rgb(127, 184, 178);padding-top: 20rpx;">基本信息</view>
			<form @submit="formSubmit" @reset="formReset">
				<view class="cu-form-group">
					<view class="title">机器号</view>
					<input type="number" disabled name="LMACHINENO" :value="deliverplan.LMACHINENO" placeholder="请扫描" />
					<text class='cuIcon-scan text-orange' @tap="scanning"></text>
				</view>
				<view class="cu-form-group">
					<view class="title">机器类别</view>
					<input type="text" disabled :value="deliverplan.LPRCTYPE" placeholder="扫描获取" name="LPRCTYPE" />
				</view>
				<view class="cu-form-group">
					<view class="title">机器型号</view>
					<input type="text" disabled :value="deliverplan.LMACHINETYPE" placeholder="扫描获取" name="LMACHINETYPE" />
				</view>
				<view class="cu-form-group">
					<view class="title">录入人</view>
					<input type="text" disabled :value="LMAKEOPID" name="LMAKEOPID" />
				</view>
				<view class="cu-form-group">
					<view class="title">录入时间</view>
					<input disabled name="LMAKEOPDATE" type="text" :value="date" />
				</view>
				<view class="cu-form-group">
					<view class="title">备注</view>
					<input type="text" name="LREMACK" :adjust-position="false" v-model="LREMARK" @focus="focus" />
				</view>
				<button-father :Position="'tb-fa-fixed'">
					<button class="cu-btn bg-blue-gradual  lg shadow tb-flex cu-btn-new">重置</button>
					<button class="cu-btn bg-gradual-blue  lg shadow tb-flex cu-btn-new" form-type="submit">确认</button>
				</button-father>
			</form>
		</view>

		<view :class="['bg-cyan solid-bottom margin-xs radius shadow shadow-lg',BackGroundBox]" style="background-color:#FFFFFF">
			<view style="margin-left: 32rpx;font-size: 36rpx;color: rgb(127, 184, 178);padding-top: 20rpx;">明细信息</view>
			<!-- <view class="grid text-center col-2" style="height: 100rpx;line-height: 100rpx;color: #888; border-bottom: 4rpx solid #e5e5e5;">
				<view class="">总油量:0</view>
				<view class="">总数量:0</view>
			</view> -->
			<view class="flex solid-bottom padding-sm justify-center" style="align-items: center;">
				<image @tap="jumpadd" style="width: 80rpx;height: 80rpx;" src="/static/images/add.png" mode="aspectFit"></image>
				<text class="text-center text-black padding-left-sm">添加信息</text>
			</view>
		</view>
		<view :class="['margin-xs radius shadow shadow-lg bg-white' ,BackGroundBox]" v-if="isShow" style="margin-bottom: 100rpx;">
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in list" :key="index"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" @tap="jumpdetail(item,index)" :data-target="'move-box-' + index">
					<view class="grid col-1 padding-sm" style="width: 100%;">
						<view class=" flex">
							<view class="text-grey padding-sm flex-sub">揩车位置:{{item.LLREPPOSITION}}</view>
							<view class="text-gray padding-sm text-sm flex-sub">揩车方式:{{item.LLREPTYPPE}}</view>
						</view>
						<view class=" flex">
							<view class="text-grey padding-sm flex-sub">供应商:{{item.LLPTNCODE}}</view>
							<view class="text-gray padding-sm text-sm flex-sub">备注:{{item.LLTSREMARK}}</view>
						</view>
					</view>
					<view class="move" @tap.stop="deletelseq(item,index)">
						<view class="bg-red">删除</view>
					</view>
				</view>
			</view>
		</view>
		<!--输入框组件-->
		<zyt-input tui-top-dropdown="tui-top-dropdown" bgcolor="rgba(76, 76, 76, 0.95)" :show="menuShow" :height="0" @close="closeMenu"
		 :zvalue="LREMARK" @zblur="zblur">
		</zyt-input>
		<!---输入框组件-->
	</view>
</template>

<script>
	import ButtonFather from '@/colorui/components/ButtonFather.vue'
	import {
		mapGetters,
		mapMutations
	} from "vuex";
	import {
		postinsert
	} from "@/service/insert"
	import {
		postupdate
	} from "@/service/updateList.js"
	import {
		postdeleteList
	} from "@/service/deleteList"
	export default {
		data() {
			return {
				date: global.dateright,
				height: this.screenHeight,
				isShow: true,
				flag: false,
				LMAKEOPID: global.userinfo.lusername,
				modalName: null,
				listTouchStart: 0,
				list: [],
				deliverplan: [],
				LREMARK: "",
				menuShow: null
			}
		},
		computed: {
			...mapGetters(['Style', 'Font', 'getlubriclist', 'BackGround', 'BackGroundBox'])
		},
		components: {
			ButtonFather
		},
		onShow() {
			if (this.flag) {
				// this.list.push({})
				this.list = this.getlubriclist
			}
			this.flag = true
		},
		onLoad() {
			this.list = this.getlubriclist

		},
		onUnload() {
			this.dellubriclist([])
		},
		methods: {
			...mapMutations(['dellubriclist']),
			PickerChange1(e) {
				this.index1 = e.detail.value
			},
			focus(e) {
				this.menuShow = true
				this.LREMARK = e.detail.value
			},
			openMenu() {
				this.menuShow = false
			},
			zblur(value) {
				console.log(value);
				this.LREMARK = value
			},
			closeMenu() {
				this.menuShow = false
			},
			//扫描二维码
			scanning() {
				uni.scanCode({
					success: (res) => {
						console.log('条码内容：' + res.result);
						uni.request({
							url: uni.getStorageSync('IP') + ':' + uni.getStorageSync('PORT') + '/api/workInquire',
							data: {
								lid: res.result,
								lusercode:uni.getStorageSync('userinfo').lusercode
							},
							timeout: 10000,
							header: {
								'token': uni.getStorageSync('token')
							},
							success: (res) => {
								if (res.data.code == 1) {
									this.deliverplan = res.data.data
								} else {
									uni.showToast({
										title: '获取数据失败！',
										icon: 'none'
									})
								}
							},
							fail: (err) => {
								uni.showToast({
									title: '访问服务器失败！',
									icon: 'none'
								})
							}
						})
					}
				});
			},
			//跳转添加详情页面
			jumpadd() {
				// uni.navigateTo({
				// 	url: './WipeRecordadd/WipeRecordadddetail'
				// })
				global.deliverplan = this.deliverplan
				if(this.deliverplan.length != 0) {
					uni.navigateTo({
						url: './WipeRecordadd/WipeRecordadddetail'
					})
				} else {
					uni.showToast({
						title:'请先扫码',
						icon:'none'
					})
				}

			},
			jumpdetail(item,index) {
				uni.navigateTo({
					url: `./WipeRecordadd/WipeRecordset?item=${JSON.stringify(item)}&index=${index}`
				})
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			deletelseq(e, index) {
				console.log(this.list.length);
				if (this.list.length == 1) {
					this.list = []
					this.dellubriclist([])
				} else {
					this.list.splice(index, 1)
				}
			},
			formSubmit(e) {
				console.log(e);
				var rule = [];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = this.$graceChecker.check(formData, rule);
				console.log(this.list);
				if (this.list == '') {
					uni.showToast({
						title: '请添加从表',
						icon: 'none'
					})
				} else if (!checkRes) {
					uni.showToast({
						title: this.$graceChecker.error,
						icon: "none"
					});
				} else {
					console.log(e.detail.value);
					// e.detail.value['LPRCTYPE'] = this.picker1[this.index1].lname
					e.detail.value['LTYPE'] = 0
					e.detail.value['LID'] = this.LID
					e.detail.value['LSTATERUN'] = 0
					let data = e.detail.value
					postupdate(955501, global.userinfo.lusercode, {
						"table": e.detail.value
					})
					this.list.forEach((value, index) => {
						delete value['LMACHINENO']
						delete value['LMACHINETYPE']
						delete value['LMAKEDATE']
						delete value['LMAKEOPID']
						delete value['LMAKEOPNAME']
						delete value['LPRCTYPE']
						delete value['LREMARK']
						delete value['isShow']
						delete value['LSTATERUN']
						delete value['LTYPE']
						delete value['isShow']
					})
					console.log(this.list);
					postinsert(955501, global.userinfo.lusercode, {
						"table": data,
						"dts": this.list
					}).then(res => {
						if (res.code == 1) {
							uni.navigateBack({
								delta: 1
							})
							uni.showToast({
								title: '添加成功',
								icon: 'success',
								duration: 3000
							})
						} else {
							uni.showToast({
								title: '添加失败',
								icon: 'none',
							})
						}
					}).catch(err => {
						uni.showToast({
							title: '添加失败',
							icon: 'none',
						})
					})
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: whitesmoke;
	}
</style>
